<template>
	<div class="toFnav">
		<van-sticky>
		<img :src="img1" alt="">

		<div class="top">
			<img :src="img2" alt="">
			<div class="right">
				
<van-popover v-model="showPopover" trigger="click" :actions="actions">
	<template #reference>
		<img :src="imgs" alt="">
		<van-button type="primary" >
			
			我的</van-button>
	</template>
</van-popover>
			
			</div>
		</div>

<div class="bottom">
	<van-search v-model="value" show-action placeholder="泰国签证">
		<template #action>
			<div @click="onSearch" class="su">搜索</div>
		</template>
	</van-search>
</div>

		</van-sticky>
		
</div>
</template>

<script>
export default {
	data() { 
		return {
			img1: "https://gw.alicdn.com/imgextra/i1/O1CN017xWogi1e1U9IIw7IN_!!6000000003811-2-tps-750-372.png_790x10000.jpg_.webp",
			img2: "https://gw.alicdn.com/imgextra/i2/O1CN01UPnxmp28OKQIapeh8_!!6000000007922-2-tps-224-54.png_230x10000.jpg",
			showPopover: false,
			imgs: ''
			,
			actions: [
				{ text: '我的订单', icon: "https://gw.alicdn.com/tfs/TB1p03kjWagSKJjy0FhXXcrbFXa-48-48.png_110x10000.jpg_.webp" },
				{ text: '我的行程', icon: 'https://gw.alicdn.com/tfs/TB1TDyrdogQMeJjy0FgXXc5dXXa-48-48.png_110x10000.jpg_.webp' },
				{ text: '我的收藏', icon: 'https://gw.alicdn.com/tfs/TB1p3umdgoQMeJjy1XaXXcSsFXa-48-48.png_110x10000.jpg_.webp' },
				{ text: '我的红包', icon: 'https://gw.alicdn.com/tfs/TB1NWupdgMPMeJjy1XbXXcwxVXa-48-48.png_110x10000.jpg_.webp' },
				{ text: '会员中心', icon: 'https://gw.alicdn.com/tfs/TB1hdzlDSrqK1RjSZK9XXXyypXa-48-48.png_110x10000.jpg_.webp' },
				{ text: '练习飞猪', icon: 'https://gw.alicdn.com/tfs/TB1XAOHRpzqK1RjSZFvXXcB7VXa-48-48.png_110x10000.jpg_.webp' },
			],
			value: '',
		}
	},
	methods: {
		onSearch(val) {
			Toast(val);
		},
		
	},
}
</script>

<style scoped>
.toFnav{
	height: 1.86rem;
  box-sizing: border-box;
}

.toFnav img{
	width: 100%;
	height: 1.86rem;
}
.top{
	height: .88rem;
	width: 6.9rem;
	position: relative;
	top: -1.84rem;
	left: .3rem;
}
.top img{
	width: 1.5rem;
	height: .36rem;
margin-top: 15px;
}
.right{
	width: 1.46rem;
	height: .65rem;
	border-radius: .3rem;
	position: relative;
	top: -0.5rem;
	left: 5.5rem;
}
			  .right img {
			  	width: .35rem;
			  	height: .35rem;
					position: relative;
					top: -.18rem;
					right: .2rem;
			  }
				::v-deep .van-button__text{
					margin-left: .3rem;
				}
::v-deep .van-button{
	margin-top: .15rem;
}

::v-deep .van-button{
	background-color: rgba(255, 228, 196, 0.377);
	width: 1.5rem;
	height: .6rem;
	color: black;
	border-radius: .3rem;
	border: 1px solid transparent;
	position: relative;
	top: -.8rem;
right: .3rem;
}

.cai{
	width: .4rem;
	height: .4rem;
	background-color: brown;
	position: relative;
	top: 0;
}
.bottom{
	width: 6.8rem;
	height: .8rem;
	position: relative;
	top: -1.77rem;
	left: 18px;
}

::v-deep .van-search{
	width: 6.8rem;
	height: .8rem;
	border-radius: .4rem;
	background-color: white;
}
 ::v-deep .van-search__content {
	background-color: white;
 }
::v-deep .su{
	width: 1.2rem;
	height: .6rem;
	background: 50%/contain no-repeat url('https://gw.alicdn.com/imgextra/i3/O1CN01LjiKAD1V4O7MOh7eC_!!6000000002599-2-tps-240-120.png_240x10000.jpg');
	text-align: center;
	line-height: .6rem;
 }
  ::v-deep .van-field__body{
	font-size: 16px;
	}
 ::v-deep .van-field__left-icon{
	display: none;
 }
</style>